<template>
  <!-- <div :style="`background-color:#ccc;height:${heigth}px`"> -->
  <div style="height: 100%">
    <el-container>
      <el-header style="background-color: #ccc">Header</el-header>
      <el-main  style="margin: 0; padding: 0;background-color: #0069bc;">
        <div class="login-box">
          <div
            style="
              width: 1200px;
              margin: 0 auto;
              display: flex;
              justify-content: space-around;
              height: 100%;
              align-items: center;
            "
          >
            <img
              style="height: 500px; width: 700px"
              src="../../assets/images/login/bg_login.png"
              alt=""
            />
            <div
              style="
                height:350px;
                width: 400px;
                background-color: #fff;
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12),
                  0 0 6px rgba(0, 0, 0, 0.04);
                border-radius: 4px;
                padding: 20px;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div
                style="
                  text-align: center;
                  font-size: 30px;
                  font-weight: bold;
                  color: #333;
                  padding: 10px 0;
                "
              >
                DEMO-登录
              </div>
              <div
                style="
                  padding: 20px 0;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                "
              >
                <el-input
                  style="margin: 20px auto; width: 250px"
                  placeholder="请输入用户名"
                  v-model="admin"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-input
                  type="password"
                  style="margin: 20px 0; width: 250px"
                  placeholder="请输入密码"
                  v-model="password"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </div>

              <el-button type="primary" size="medium" @click="signClick">登录</el-button>
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  width: 80%;
                "
              >
                <div>忘记密码</div>
                <div>注册</div>
              </div>
              <!-- <el-input placeholder="请输入内容" v-model="input4">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input> -->
            </div>
          </div>
        </div>
      </el-main>
      <el-footer style="background-color: #ccc">Footer</el-footer>
    </el-container>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  data() {
    return {
      heigth: "",
      isDebugMode: false,
      loginSerial: null,
      interval: null,
      qrImageUrl: "",
      qrIndex: 1, //1 二维码登录 2 手机账号登录
      admin: "",
      password: "",
      submitData: api.createInputObj(), //数据整理
    };
  },

  mounted() {
    this.init();
    this.heigth = window.innerHeight;
    console.log(window.innerHeight);
  },

  //登录时候按enter键进入
  created() {
    let that = this;
    document.onkeypress = function (e) {
      let keycode = document.all ? event.keyCode : e.which;
      if (keycode == 13) {
        that.signClick(); // 登录方法名
        return false;
      }
    };
  },

  beforeDestroy() {},

  methods: {
    //数据初始化
    init() {
      // api.clearAccountCache();
      let pageParam = this.$route.params;
      if (pageParam && pageParam.reload) {
        window.location.reload();
        return;
      }
    },

    // 手机登录
    signClick() {
      let phone = this.admin || "";
      let passwd = this.password || "";
      api.toast("登录成功");
      api.jumpPage("Home", null, true);
      // if (!(phone && passwd)) { //校验数据是否合理
      //   api.toast("请输入手机号和密码");
      //   return;
      // }
      // api.loginByPassword(phone, passwd, (success, reason) => {
      //   if (success) {
      //     api.jumpPage("Home", null, true);
      //     homeApi.initSocket();
      //   } else {
      //     api.toast(reason);
      //   }
      // });
    },
  },
};
</script>

<style scoped>
.login-img {
  position: absolute;
  left: 0;
  /* top:50%; */
  transform: translateY(50%);
}

.login-box {
  height: 90vh;
  
  min-height: 600px;

  font-size: 14px;
  /* background: url("../../assets/images/login/loginBg-cbdc8a41.jpg") repeat-x 0 0; */
}

.login-container {
  margin: 0;
  padding: 0;
  height: 100vh;

  /* position: relative;
  
  border: 0;
  padding: 0; */
}

.login-backbar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #011221, #25485c);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-back {
  height: 100%;
  box-shadow: 0 0 40px #018ffd;
}
.login-qrbackbar {
  position: fixed;
  top: -1.11%;
  bottom: 0;
  left: 46%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login-cur {
  cursor: pointer;
}

.login-qrback {
  height: 84%;
}

.login-qrbar {
  position: fixed;
  top: 10%;
  bottom: 0;
  left: 46%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-qrbar2 {
  position: fixed;
  top: 60%;
  bottom: 0;
  left: 10%;
  right: 0;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

.login-qr4 {
  height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-top {
  padding-top: 10%;
}

.login-qr {
  height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-qr {
  height: 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-qr2 {
  position: fixed;
  top: 0;
  bottom: 41.4%;
  left: 67.5%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-qr3 {
  height: 42%;
  width: 38%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

.login-border {
  border: 1px solid #fff;
  height: 100%;
}

.login-left {
  margin-left: 3%;
}

.login-img {
  width: 30px;
  height: 30px;
}

.login-img2 {
  width: 40px;
  height: 40px;
}

.login-leftimg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid WhiteSmoke;
  padding: 2% 0;
}

.login-width {
  width: 15%;
}

.login-width2 {
  width: 85%;
}

.login-width2 >>> .el-input__inner {
  background: WhiteSmoke;
  border: 0;
}

.login-div {
  width: 100%;
  margin-top: 20%;
  background: WhiteSmoke;
}

.login-div2 {
  width: 100%;
  margin-top: 8%;
  background: WhiteSmoke;
}

.login-div3 {
  padding: 4% 0;
  width: 100%;
  margin-top: 20%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  color: #000;
  font-size: 20px;
}
</style>